<template>
	<view class="content">
		<view id="contact" class="booking-mod qn_contact">
			<view class="item">
				<label>用户名</label>
				<input
					v-model="dataForm.username"
					class="ct js_phone_number"
					placeholder="请输入员工用户名"
				/>
				<view class="delete_icon" node-type="input_clear"></view>
			</view>
			<view class="item">
				<label>密码</label>
				<input
					v-model="dataForm.password"
					class="ct js_phone_number"
					placeholder="请输入员工密码"
					type="password"
				/>
			</view>
			<view class="operate">
				<view class="btn btn-submit disabled" @click="login()">登录</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';	
export default {
	data() {
		return {
			dataForm: {
				username: '',
				password: ''
			}
		};
	},
	onLoad() {
		
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		...mapMutations(['login']),
		login() {
			console.log(this.dataForm);
			if ((/^\s*$/g.test(this.dataForm.username))) {
				uni.showModal({
					title: '提示',
					content: '用户名不能为空！',
					showCancel:false
				})
				return;
			} else if ((/^\s*$/g.test(this.dataForm.password))) {
				uni.showModal({
					title: '提示',
					content: '密码不能为空！',
					showCancel:false
				})
				return;
			}
			uni.request({
				url: 'https://api.wscjx.cn/api/bus/login',
				data: this.dataForm,
				header: {
					'Content-Type': 'application/json;charset=UTF-8',
					token: this.userInfo.token
				},
				method: 'POST',
				success: res => {
					console.log(res);
					if (res.statusCode == 200) {
						if (res.data.code == 0) {
							uni.setStorageSync('hasAdmin', true);
							debugger
							uni.navigateTo({
								url: '../statistical/index'
							})
						}
					}
				},
				fail: err => {
					console.log(err);
				}
			});
		}
	}
};
</script>

<style>
.qn_contact {
	padding-left: 30upx;
}
.booking-mod {
	margin-top: 20upx;
	font-size: 28upx;
	background: #fff;
	color: #1ba9ba;
}
.qn_contact .item {
	border-bottom: 2upx solid #e3e6e9;
	height: 84upx;
	font-size: 28upx;
	line-height: 84upx;
	position: relative;
}
.qn_contact .item label {
	color: #1ba9ba;
	display: inline-block;
	width: 20%;
}

label {
	cursor: default;
}
.qn_contact .item input {
	font-size: 32upx;
	width: 65%;
}

.qn_contact .delete_icon {
	visibility: hidden;
	z-index: 100;
	position: absolute;
	top: 22upx;
	right: 30upx;
	display: inline-block;
	width: 36upx;
	height: 36upx;
	background: url(//simg1.qunarzz.com/m_bus/tts/inputDelete_icon.png) 0 0 no-repeat;
	background-size: 100% 100%;
	z-index: 100;
}
input {
	text-rendering: auto;
	color: -internal-light-dark(black, white);
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0upx;
	text-shadow: none;
	display: inline-block;
	text-align: start;
	appearance: auto;
	background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
	cursor: text;
	margin: 0em;
	font: 400 26.66upx Arial;
	padding: 2upx 4upx;
	border-width: 4upx;
	border-style: inset;
	border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
	border-image: initial;
}
/* input:not([type="image" i]) {
    box-sizing: border-box;
} */
.booking-mod .ct {
	vertical-align: middle;
	border: 0;
	padding-left: 10upx;
}
.booking-mod input,
.booking-mod select {
	outline: 0;
}
.qn_contact .item input {
	font-size: 32upx;
	width: 65%;
}
.ct {
	color: #333333;
}
.em {
	margin: 0 4upx;
}
.operate {
	margin-top: 30upx;
	margin-left: 30upx;
	margin-right: 30upx;
}

.operate .btn-submit {
    color: #fff;
    text-align: center;
	height: 70upx;
    line-height: 70upx;
    display: block;
    background: #25a4bb;
    border-radius: 10upx;
}
</style>
